<template>
	<view class="control">
		<van-tabs :active="active" animated>
			<van-tab title="待审批">
				<view class="list">
					<view class="item" v-for="item in 5" :key="item">
						<view>
							<view class="item-title">产品上架</view>
							<view class="detail">
								游泳课程-第二课节 游泳的基本认知
							</view>
						</view>
						<view class="flex-space-between">
							<view class="flex">
								<image mode="aspectFit"
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61adb346d092020011e1253a/16387797914734109397.png" />
								<text class="time">王大锤</text>
							</view>
							<view class="time ti">
								2020.11.12 12:30:20
							</view>
						</view>
					</view>
				</view>
			</van-tab>
			<van-tab title="已通过">
				<view class="list">
					<view class="item" v-for="item in 5" :key="item">
						<view>
							<view class="item-title">产品上架</view>
							<view class="detail">
								游泳课程-第二课节 游泳的基本认知
							</view>
						</view>
						<view class="flex-space-between">
							<view class="flex">
								<image mode="aspectFit"
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61adb346d092020011e1253a/16387797914734109397.png" />
								<text class="time">王大锤</text>
							</view>
							<view class="time ti">
								2020.11.12 12:30:20
							</view>
						</view>
					</view>
				</view>
			</van-tab>
			<van-tab title="未通过">
				<view class="list">
					<view class="item" v-for="item in 5" :key="item">
						<view>
							<view class="item-title">产品上架</view>
							<view class="detail">
								游泳课程-第二课节 游泳的基本认知
							</view>
						</view>
						<view class="flex-space-between">
							<view class="flex">
								<image mode="aspectFit"
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61adb346d092020011e1253a/16387797914734109397.png" />
								<text class="time">王大锤</text>
							</view>
							<view class="time ti">
								2020.11.12 12:30:20
							</view>
						</view>
					</view>
				</view>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0
			}
		},
		onLoad(query) {
			this.active = parseInt(query.state)
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.control {
		background-color: #f3f3f3;
		height: 100vh;
	}

	.list {
		height: calc(100vh - 60px);
		overflow: auto;
		padding: 30rpx 30rpx;

		.item {
			margin-bottom: 20rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 2rpx 6.86rpx 0.14rpx rgba(0, 0, 0, 0.1);
			border-radius: 10rpx;
			padding: 29rpx 18rpx 30rpx 30rpx;
			height: 280rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.item-title {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-weight: 700;
				margin-bottom: 24rpx;
			}

			.detail {
				line-height: 34rpx;
				color: rgb(102, 102, 102);
				font-size: 26rpx;
				font-weight: 500;
			}

			image {
				width: 18rpx;
				height: 19rpx;
				margin-right: 11rpx;
			}

			.time {
				color: rgb(51, 51, 51);
				font-size: 24rpx;
				font-weight: 500;
			}

			.ti {
				font-weight: 700;
			}
		}
	}
</style>